<template>

    <!-- 基本的样式
           1：全屏
         
      
    
    -->

   <div class="pop"> 
       
        <!-- 内容区域 -->
        <div class="content">
            <div class="content-header w-flex3">
                <div>主题</div>
                <div @click="deletes">x</div>
            </div>
            <div class="content-list">
                   <div class="list-item w-flex3" v-for="(item,index) in themeColor" :key="index">
                    <div>{{ item.name }} </div>   <div>
                          <div class="Active" @click="isChange(index,item.color)" v-if="!item.is">使用</div>
                          <div class="isActive"  v-else>激活</div>
                    </div>
                
                </div>
            </div>
        </div>
</div>
    
 </template>

 <script setup lang="ts">
  import {useStore} from 'vuex'
 import {ref} from 'vue'
 let store = useStore()

 let themeColor = ref([
    {name:'黑色',is:true,color:'black'},
    {name:'蓝色',is:false,color:'blue'},
 ])


 const isChange = (index:number,val:string)=>{
            //根据索引找的数组的一项，修改数据 ，其他的变成false changeTheme

            themeColor.value.forEach((item,idx)=>{
                   if(index==idx){
                    themeColor.value[index].is =  !themeColor.value[index].is
                   }else{
                   
                    
                    themeColor.value[idx].is = false
                   }
                  
                   
            })

            // 将数据 传递 vuex 

            //  1) 先到vuex中定要这个数据
            //  2）给vuex中的数据进行复制
            store.commit('layout/changeTheme',val)
 }


 // 我这个组件显示和隐藏=》 在父级组件

 // 子组件给父组件数据
   let emits =  defineEmits(['deletePop'])
 const deletes = ()=>{
    emits('deletePop')
 }
</script>


 <style scoped lang="scss">
.pop{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: black;
    opacity: 0.5;


    .content{
        background: #fff;
        width:40%;
        padding:18px 18px;
        border-radius: 10px;
      position: absolute;
      top:50%;
      left:50%;
     transform: translate(-50%,-50%);
 
      .content-list{
           .list-item{
            padding:10px 10px;
            .isActive{
                background: blue;
                padding:10px 10px;
                border-radius: 50%;
            }
            .Active{
                padding:10px 10px;
                border-radius: 50%;
            }
           }
           .list-item:hover{
            background: #ccc;
           }
      }
    }
}
</style>